<template>
	<view class="container">
		<view class="order-info">
			<view class="order-number">订单号：{{info.order.order || ''}}</view>
			<view class="course-name">{{ info.order.trade_name || '' }}</view>
			<view class="course-expiry">视频有效期倒计时：{{ info.order.countdown || '' }}</view>
			<view class="paid-amount">已付费：{{ info.order.price || '' }}元</view>
			<view class="instructor-info">
				<view class="instructor-info-l">
					<text>主讲：</text>
					<image class="instructor-photo" :src="info.order.head" style="border-radius: 50%;"   @click="toMixinIndex(1,{userId: info.order.user_id})"></image>
					<text>{{ info.order.nickname || '' }}</text>
				</view>

				<view class="consult-button" @click="consultHim()">咨询他</view>
			</view>
		</view>

		<view class="rating-section">
			<text class="rating-title">评价</text>
			<view class="rating-item">
				<text class="rating-label">视频质量</text>
				<view class="stars">
					<u-rate v-model="form.video_quality" :allowHalf="true" activeColor="#F2CB51"
						inactiveColor="#B3B3B3"></u-rate>
				</view>
				<text class="score">{{ form.video_quality * 2 }}分</text>
			</view>
			<view class="rating-item">
				<text class="rating-label">内容质量</text>
				<view class="stars">
					<u-rate v-model="form.content_quality" :allowHalf="true" activeColor="#F2CB51"
						inactiveColor="#B3B3B3"></u-rate>
				</view>
				<text class="score">{{ form.content_quality * 2 }}分</text>
			</view>
			<view class="rating-item">
				<text class="rating-label">教学方法</text>
				<view class="stars">
					<u-rate v-model="form.teaching_method" :allowHalf="true" activeColor="#F2CB51"
						inactiveColor="#B3B3B3"></u-rate>
				</view>
				<text class="score">{{ form.teaching_method * 2 }}分</text>
			</view>
			<view class="comment-section">
				<textarea class="comment-input" placeholder="您可以从视频质量、内容质量、教学方法等几个方面来进行评价" v-model="form.content"></textarea>
			</view>
		</view>

		<button class="submit-button" @click="submit">提交</button>
	</view>
</template>
<script>
	import {
		InformationEvaluate,
		InformationSendFriendRequest,
		InformationAddEvaluate
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				id: '',
				info: '',
				form: {
					// id: '',
					video_quality: 5, //视频质量
					content_quality: 5, //内容质量
					teaching_method: 5, //教学方法
					content: '', //内容
					order_id: '', //订单id
					course_id: '' //视频id
				}
			};
		},
		onLoad(e) {
			this.id = e.id
			this.init()
		},
		methods: {
			init() {
				uni.showLoading()
				InformationEvaluate({
					id: this.id
				}).then(res => {
					uni.hideLoading()
					this.info = res.data
					
					this.form.order_id = res.data.order.id
					this.form.course_id = res.data.order.course_id
					
					if(!(Array.isArray(res.data.evaluate) && res.data.evaluate.length === 0)){
						this.form.id = res.data.evaluate.id
						this.form.video_quality = res.data.evaluate.video_quality / 2
						this.form.content_quality = res.data.evaluate.content_quality / 2
						this.form.teaching_method = res.data.evaluate.teaching_method / 2
						this.form.content = res.data.evaluate.content
					}
				})
			},
			consultHim() {
				if (this.info.order.type == 0) {
					uni.showLoading()
					InformationSendFriendRequest({
						id: this.info.order.business_card_id
					}).then(res => {
						uni.hideLoading()
						uni.showToast({duration:3000,
							title: '已递名片！',
							icon: 'none'
						})
						setTimeout(() => {
							this.init()
						}, 1500)
					})
				}
				if (this.info.order.type == 1) {
					uni.navigateTo({
						url: '/pagesA/wxChat/wxChat?id=' + this.info.order.user_id
					})
				}
			},
			submit(){
				if(this.form.content === ''){
					uni.showToast({duration:3000,
						title:"请输入评价内容！",
						icon: 'none'
					})
					return
				}
				let data = {
					...this.form,
					video_quality: this.form.video_quality * 2,
					content_quality: this.form.content_quality * 2,
					teaching_method: this.form.teaching_method * 2
				}
				uni.showLoading()
				InformationAddEvaluate(data).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title:'评价成功！',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-info {
		padding: 30rpx 56rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 16rpx;
		border-bottom: 7rpx solid #F6F7F8;
	}

	.order-number {
		font-family: PingFang;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 36rpx;
	}

	.course-name {
		font-family: PingFang;
		font-weight: bold;
		font-size: 28rpx;
		color: #131313;
		margin-bottom: 21rpx;
	}

	.course-expiry {
		font-family: PingFang;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 27rpx;
	}

	.paid-amount {
		font-family: PingFang;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 46rpx;
	}

	.instructor-info {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.instructor-info-l {
			display: flex;
			align-items: center;
			font-family: PingFang;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;

			image {
				width: 88rpx;
				height: 88rpx;
			}
		}
	}

	.instructor-photo {
		border-radius: 50%;
		margin-right: 27rpx;
		margin-left: 30rpx;
	}


	.consult-button {
		width: 146rpx;
		height: 62rpx;
		border-radius: 30rpx;
		border: 1px solid #FFC000;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFC000;
	}

	.rating-section {
		padding: 30rpx;
		background-color: #fff;
	}

	.rating-title {
		font-family: PingFang;
		font-weight: 800;
		font-size: 30rpx;
		color: #131313;
		margin-bottom: 22rpx;
	}

	.rating-item {
		display: flex;
		align-items: center;
		margin-bottom: 33rpx;
		justify-content: center;
	}

	.rating-label {
		font-family: PingFang;
		font-weight: 500;
		font-size: 28rpx;
		color: #131313;
		margin-right: 55rpx;
	}

	.stars {
		width: 225rpx;
		display: flex;
		align-items: center;
		margin-right: 34rpx;
	}

	.star {
		width: 29rpx;
		height: 26rpx;
		margin-right: 20rpx;
	}

	.score {
		font-size: 28rpx;
		color: #ff5722;
		width: 80rpx;
	}

	.comment-section {
		padding: 24rpx 34rpx;
		background-color: #fff;
		margin-top: 54rpx;
		box-sizing: border-box;
		width: 694rpx;
		height: 269rpx;
		background: #F6F7F8;
	}

	.comment-input {
		width: 100%;
		height: 100%;
		font-family: PingFang;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.submit-button {
		width: 660rpx;
		height: 86rpx;
		background: #12B475;
		border-radius: 43rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang;
		font-weight: 800;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>